import { useEffect,useState } from "react";
import { ResPushMusic } from "../../../../api";
import { Link } from 'react-router-dom'

export default function MusicMenu() {
  let [musicMenu, setMusicMenu] = useState([]);
  useEffect(async () => {
    try {
      const {result} = await ResPushMusic(); 
      setMusicMenu(result);
    } catch (error) {
      console.log(error);
    }
  }, []);
  
  return (
    <div id="pushMusic">
      <span className="pushModuleTitle">编辑推荐</span>
      <ul id="menu">
        {musicMenu.map((item) => {
          return (
            <li key={item.id}>
                <Link to={`/PlayList/detail?id=${item.id}`}>
                    <img src={item.picUrl} alt="看什么看" />
                    </Link>
                <Link to={`/PlayList/detail?id=${item.id}`}>{item.name}</Link>
            </li>
        );
        })}
      </ul>
    </div>
  );
}
